<template>
  <div>
    <el-input v-model="role.roleName" class="w-50 m-2" placeholder="搜索框" prefix-icon="Search"
      style="width: 20%;min-width: 100px;" />

    <el-table :data="roleList" border style="width: 100%;border-right: red;">
      <!-- <el-table-column label="Date" prop="date">
        <template #header>
          全部
        </template>
        <template #default="scope">
          {{ scope.row }}
        </template>
      </el-table-column> -->

      <el-table-column label="Date" prop="date">
        <template #header>
          Name
        </template>
        <template #default="scope">
          {{ scope.row.roleName }}
        </template>
      </el-table-column>

      <el-table-column label="拥有权限" prop="date">
        <template #header>
          拥有权限
        </template>
        <template #default="scope">
          <el-tag v-for="item in scope.row.permsEntityList" closable @close="on_deleteRolePerms(scope.row.roleID,item.permsID)">
            {{ item.permsName }}
          </el-tag>
          <el-tag round @click="on_dialog(scope.row.roleID)">
            <el-icon>
              <CirclePlus />
            </el-icon>
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column align="right">
        <template #header>
          a
        </template>
        <template #default="scope">
          <el-button size="small">Edit</el-button>
          <el-button size="small" type="danger">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialog_show" title="Tips" width="500" draggable>
      <dialogs v-if="dialog_show" :param="dialog_roleID"  @call-getRoleList="getRoleList"/>
    </el-dialog>
  </div>
</template>

<style scoped>
</style>
<script lang="ts" setup>
import { computed, ref, reactive, onMounted, watch } from 'vue'
import api from '/@/api/sy/apiLog.js';
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router'
import dialogs from './zi/limitsRoleDialog.vue'
interface RowRole {
  roleID: number | null
  parentRoleID: number | null
  roleName: string | null
  createTime: Date | null
  updateTime: Date | null
  permsEntityList: RowPerms[] | null
}
interface RowPerms {
  permsID: number | null
  parentPermsID: number | null
  permsName: string | null
  permsCode: string | null
  createTime: Date | null
  updateTime: Date | null
}
let roleList = ref<RowRole[]>([])
let persList = ref<RowPerms[]>([])
let role = ref<RowRole>({
  roleID: null,
  parentRoleID: null,
  roleName: '',
  createTime: null,
  updateTime: null,
  permsEntityList: null
})
// 弹窗显示
let dialog_show = ref<boolean>(false)
let dialog_roleID = ref()

function on_deleteRolePerms(roleID:number,permsID:number) {
  var param={
    "roleID":roleID,
    "permsID":permsID
  }
  api.post('public/role/deleteRolePerms', param).then((response: any) => {
    // 处理服务器返回的响应
    if(response.data.code=200){
      getRoleList()
    }
  }).catch((error: any) => { }).finally(() => {})
}
function getPermsList() {
  var param = {
    permsName: '',

  }
  api.post('public/perms/getPermsList', param).then((response: any) => {
    // 处理服务器返回的响应
    persList.value = response.data.data
  }).catch((error: any) => { }).finally(() => {})
}

function getRoleList() {
  var param = {
    roleName: '',
  }
  api.post('public/role/getRoleList', role.value).then((response: any) => {
    // 处理服务器返回的响应
    roleList.value = response.data.data;
  }).catch((error: any) => { }).finally(() => { console.log('必须执行') })
}

watch(role, (newVal, oldVal) => {
  getRoleList()
}, { deep: true }) // 深层监控

function on_dialog(val:number) {
  dialog_roleID.value = val

  dialog_show.value=true;
}

onMounted(() => {
  getPermsList()
  getRoleList()
  // 在这里写逻辑
});
</script>
  